<template>
  <div class="CountingTask">
    <el-main>
      <div>
        <el-form ref="form" :model="form" label-width="100px">
          <el-row :gutter="20">
            <el-col :span="12">
              <div class="grid-content bg-purple">
                <el-form-item label="盘点单状态">
                  <el-select v-model="form.assetType" placeholder="全部">
                    <el-option label="全部" value="all"></el-option>
                    <el-option label="已完成" value="completed "></el-option>
                    <el-option label="未盘点" value="unfinished"></el-option>
                    <el-option label="盘点中" value="inventory"></el-option>
                  </el-select>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content bg-purple">
                <div class="block">
                  <span class="demonstration">创建时间:</span>
                  <el-date-picker
                    v-model="value6"
                    type="daterange"
                    range-separator="-"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                  ></el-date-picker>
                  <el-button icon="el-icon-search"></el-button>
                </div>
              </div>
            </el-col>
          </el-row>
          <!-- </el-row>
          <el-row>-->
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <!-- <el-button type="primary" icon="el-icon-view" :plain="true" @click="open">开始盘点</el-button> -->
              <el-button type="primary" icon="el-icon-edit" @click="dialogFormVisible = true">编辑</el-button>
              <el-button type="danger" icon="el-icon-delete" :plain="true" @click="open4">删除</el-button>
            </div>
          </el-col>
        </el-form>
      </div>
      <el-table
        ref="multipleTable"
        :data="tableData3"
        border
        height="321"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="state" label="盘点状态" style="width: 20%" :formatter="formatState"></el-table-column>
        <el-table-column prop="name" label="盘点名称" style="width: 20%">
          <!-- <el-button type="text" @click="dialogFormVisible = true">123 Dialog</el-button> -->
        </el-table-column>
        <el-table-column prop="createDate" label="创建时间" style="width: 20%"></el-table-column>
        <el-table-column prop="createUserName" label="创建人" style="width: 20%"></el-table-column>
        <el-table-column prop="operation" label="操作" style="width: 20%"></el-table-column>
      </el-table>
      <el-dialog
        title="盘点任务单"
        width="80%"
        :visible.sync="dialogFormVisible"
        style="font-weight: 700;"
      >
        <el-form :model="form">
          <el-row>
            <el-col :span="12">
              <div class="grid-content bg-purple">
                <el-form-item label="盘点单名称" :label-width="formLabelWidth">
                  <el-input v-model="form.name" auto-complete="off"></el-input>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content bg-purple-light">
                <el-form-item label="分配用户" :label-width="formLabelWidth">
                  <el-input v-model="form.name" auto-complete="off" ></el-input>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
          <hr>
          <br>
          <el-row>
            <el-col :span="14">
              <div class="grid-content bg-purple">
                <el-form-item>
                  <h2 style="font-size:18px;font-weight: 700;">待盘点任务单</h2>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="10">
              <div class="grid-content bg-purple">
                <el-form-item>
                  <el-input
                    placeholder="请输入关键字进行搜索"
                    v-model="input5"
                    class="input-with-select"
                    style="width:230px;margin:0 10px;"
                  >
                    <el-button slot="append" icon="el-icon-search"></el-button>
                  </el-input>
                  <!-- <el-button type="primary" icon="el-icon-search">搜索</el-button> -->
                  <el-button type="primary">删除</el-button>
                  <el-button type="primary" @click="innerVisible = true">添加资产</el-button>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
          <el-dialog width="80%" title="添加资产" :visible.sync="innerVisible" append-to-body>
            <el-form-item>
              <el-row :gutter="20">
                <el-col :span="6">
                  <div class="grid-content bg-purple">
                    <el-input
                      placeholder="请输入关键字进行搜索"
                      v-model="input6"
                      class="input-with-select"
                      style="width:230px;margin:0 10px;"
                    >
                      <el-button slot="append" icon="el-icon-search"></el-button>
                    </el-input>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="grid-content bg-purple">
                    <el-button type="primary">取消</el-button>
                    <el-button type="primary">确定</el-button>
                  </div>
                </el-col>
              </el-row>
            </el-form-item>
            <el-table
              ref="multipleTable"
              :data="tableData3"
              border
              tooltip-effect="dark"
              style="width: 100%"
              @selection-change="handleSelectionChange"
            >
              <el-table-column type="selection" width="55"></el-table-column>
              <el-table-column prop="State" label="状态" width="150"></el-table-column>
              <el-table-column prop="pictureUrl" label="照片" width="120"></el-table-column>
              <el-table-column prop="assetCode" label="资产编号" width="120"></el-table-column>
              <el-table-column prop="assetName" label="资产名称" width="120"></el-table-column>
              <el-table-column prop="standardType" label="规格" width="300"></el-table-column>
              <el-table-column prop="sn" label="SN号" width="120"></el-table-column>
              <el-table-column prop="unit" label="计量单位" width="120"></el-table-column>
              <el-table-column prop="amount" label="金额(单位:万元)" width="200"></el-table-column>
              <el-table-column prop="useCompany" label="使用公司" width="120"></el-table-column>
              <el-table-column prop="useDept" label="使用部门" width="120"></el-table-column>
              <el-table-column prop="buyDate" label="购入时间" width="120"></el-table-column>
              <el-table-column prop="useUser" label="使用人" width="120"></el-table-column>
              <el-table-column prop="ownCompany" label="所属公司" width="300"></el-table-column>
              <el-table-column prop="area" label="区域" width="120"></el-table-column>
              <el-table-column prop="storageLocation" label="存放地点" width="120"></el-table-column>
              <el-table-column prop="deadLine" label="使用期限(月)" width="120"></el-table-column>
              <el-table-column prop="assetAdmin" label="管理员" width="120"></el-table-column>
            </el-table>
          </el-dialog>
          <!-- <el-form-item></el-form-item> -->
          <el-table :data="gridData" border>
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column property="State" label="状态"></el-table-column>
            <el-table-column property="status" label="盘点状态"></el-table-column>
            <el-table-column property="number" label="资产编号"></el-table-column>
            <el-table-column property="address" label="资产名称"></el-table-column>
            <el-table-column property="useDept" label="使用部门"></el-table-column>
            <el-table-column property="useUser" label="使用人"></el-table-column>
            <el-table-column property="buyDate" label="购入时间"></el-table-column>
            <el-table-column property="ownCompany" label="所属公司"></el-table-column>
            <el-table-column property="assetAdmin" label="管理员"></el-table-column>
          </el-table>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
        </div>
      </el-dialog>
      <br>
      <div class="block">
        <el-row :gutter="20">
          <el-col :span="4">
            <div class="grid-content bg-purple">
              <!-- <span class="demonstration">已选择0条</span> -->
            </div>
          </el-col>
          <el-col :span="10">
            <div class="grid-content bg-purple">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage4"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="10"
                layout="prev, pager, next, sizes, jumper"
                :total="this.total"
              ></el-pagination>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-main>
  </div>
</template>
<script>
import { axiosPost, axiosGet } from "@/api/index.js";
export default {
  data() {
    return {
      form: {
        state: "",
        name: "",
        createDate: "",
        createUserName: "",
        operation: "",
        assetType: "",
        assetName: "",
        department: "",
        status: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: ""
      },
      page: 1,
      pageSize: 10,
      scarchContent: "",
      total:0,
      tableData3: [
      ],
      gridData: {},
      input5: "",
      input6: "",
      value6: "",
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 1,
      multipleSelection: [],
      dialogTableVisible: false,
      dialogFormVisible: false,
      outerVisible: false,
      innerVisible: false,
      formLabelWidth: "120px"
    };
  },
  //调用封装好的函数,获取页面数据
  beforeMount() {
    this.getList();
  },
  methods: {
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSizeChange(val) {
      console.log(val);
      this.pageSize = val;
    },
    //调用封装好的函数,分页加载数据
    handleCurrentChange(val) {
      this.page = val;
      console.log(`当前页: ${val}` + "this.page = " + this.page);
      this.getList();
    },
    open() {
      this.$message("请至少选择一条盘点任务");
    },
    open4() {
      this.$message.error("已盘点的数据不能删除!");
    },
    //将数据库对应的数字转换成在用 闲置 报废
    formatState: function(row, column) {
      return row.state === 1 ? "未完成" : row.state === 2 ? "已完成" : "盘点中";
    },
    //获取资产列表接口封装起来 
    getList: function() {
      axiosGet(
        "/Task/GetTaskList?pageSize=" +
          this.pageSize +
          "&page=" +
          this.page +
          "&name="
      ).then(res => {
        if (res.status == 200 && res.data.success) {
          this.tableData3 = res.data.data.list;
          this.total=res.data.data.total;
/*           this.name=res.data.data.list.name;
          console.log(res.data.data.list.name); */
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
</style>
